<template>
  <vxe-modal
    v-model="dialogFormVisible"
    :title="title"
    show-footer
    transfer
    width="60%"
    destroy-on-close
    :loading="listLoading"
    @close="close"
  >
    <template #default>
      <el-descriptions :column="1" border>
        <el-descriptions-item label="日志主键" min-width="120">
          {{ form.id }}
        </el-descriptions-item>
        <el-descriptions-item label="链路追踪">
          {{ form.traceId }}
        </el-descriptions-item>
        <el-descriptions-item label="操作人编号">
          {{ form.userId }}
        </el-descriptions-item>
        <el-descriptions-item label="操作人名字">
          {{ form.userNickname }}
        </el-descriptions-item>
        <el-descriptions-item label="操作人 IP">
          {{ form.userIp }}
        </el-descriptions-item>
        <el-descriptions-item label="操作人 UA">
          {{ form.userAgent }}
        </el-descriptions-item>
        <el-descriptions-item label="操作模块">
          {{ form.module }}
        </el-descriptions-item>
        <el-descriptions-item label="操作名">
          {{ form.name }}
        </el-descriptions-item>
        <el-descriptions-item v-if="form.content" label="操作内容">
          {{ form.content }}
        </el-descriptions-item>
        <el-descriptions-item v-if="form.exts" label="操作拓展参数">
          {{ form.exts }}
        </el-descriptions-item>
        <el-descriptions-item label="请求 URL">
          {{ form.requestMethod }} {{ form.requestUrl }}
        </el-descriptions-item>
        <el-descriptions-item label="Java 方法名">
          {{ form.javaMethod }}
        </el-descriptions-item>
        <el-descriptions-item label="Java 方法参数">
          {{ form.javaMethodArgs }}
        </el-descriptions-item>
        <el-descriptions-item label="操作时间">
          {{
            $XEUtils.toDateString(
              form.startTime,
              format || 'yyyy-MM-dd HH:mm:ss'
            )
          }}
        </el-descriptions-item>
        <el-descriptions-item label="执行时长">
          {{ form.duration }} ms
        </el-descriptions-item>
        <el-descriptions-item label="操作结果">
          <div v-if="form.resultCode === 0">正常</div>
          <div v-else>失败({{ form.resultCode }})</div>
        </el-descriptions-item>
        <el-descriptions-item v-if="form.resultCode === 0" label="操作结果">
          {{ form.resultData }}
        </el-descriptions-item>
        <el-descriptions-item v-if="form.resultCode > 0" label="失败提示">
          {{ form.resultMsg }}
        </el-descriptions-item>
      </el-descriptions>
    </template>
    <template #footer>
      <div class="dialog-footer" style="text-align: center">
        <el-button type="danger" @click="close">取消</el-button>
      </div>
    </template>
  </vxe-modal>
</template>

<script>
  export default defineComponent({
    name: 'PostEdit',
    emits: ['fetch-data'],
    setup(props, { emit }) {
      const $baseMessage = inject('$baseMessage')
      const $XEUtils = inject('$XEUtils')
      const state = reactive({
        formRef: null,
        listLoading: false,
        subListLoading: false,
        form: {},
        title: '',
        dialogFormVisible: false,
      })

      const showEdit = async (row) => {
        state.dialogFormVisible = true
        state.form = row
        state.listLoading = false
      }
      const close = () => {
        state.form = {}
        state.dialogFormVisible = false
        state.listLoading = false
        state.subListLoading = false
      }

      onMounted(() => {})
      return {
        ...toRefs(state),
        showEdit,
        close,
      }
    },
  })
</script>

<style lang="scss" scoped>
  .vab-tree-border {
    width: 100%;
    height: 250px;
    padding: $base-padding;
    overflow-y: auto;
    border: 1px solid #dcdfe6;
    border-radius: $base-border-radius;
  }

  .el-container {
    height: calc(100vh - 155px);
  }
</style>
